<template>
  <view class="publish-container">

    <!-- 上传通道 -->
    <block>
      <view class="item-container default-box-shadow" style="display: none;">
        <Title title="上传通道" :custom-style="{
          'marginBottom': '24rpx',
          'fontSize': '28rpx',
          'fontWeight': '700',
          'color': '#333'
        }">
        <!-- #ifdef H5 -->
          <view class="create-album" @click="goBack">
            <!-- <u-icon name="plus" color="#56d39d" size="24"></u-icon> -->
            <text class="huiju-iconfont huiju-icon-fanhui1"></text>
            <text>返回</text>
          </view>  
        <!-- #endif -->  
        </Title>
        <view class="select-pass-container">
          <view class="pass-item pass-item1"
            :class="{
              'pass-item-active': uploadForm.show_type === 0
            }"
            @click="handleShowType(0)">
            <view class="pass-title">
              默认通道
            </view>
            <view class="pass-des">
              审核较严：过审展示所有平台
            </view>
          </view>
          <view class="pass-item"
            :class="{
              'pass-item-active': uploadForm.show_type === 1
            }"
            @click="handleShowType(1)">
            <view class="pass-title">
              快手/微信/QQ通道
            </view>
            <view class="pass-des">
              审核宽松：过审仅展示快微Q平台
            </view>
          </view>
        </view>
      </view>
    </block>

    <view class="item-container default-box-shadow">
      <Title title="素材类型" :custom-style="{
        'marginBottom': '24rpx',
        'fontSize': '28rpx',
        'fontWeight': '700',
        'color': '#333'
      }">
      <!-- #ifdef H5 -->
        <view class="create-album" @click="goBack">
          <!-- <u-icon name="plus" color="#56d39d" size="24"></u-icon> -->
          <text class="huiju-iconfont huiju-icon-fanhui1"></text>
          <text>返回</text>
        </view>
      <!-- #endif -->
      </Title>
      <view class="type-container">
        <view
          v-for="(item, index) in artworksTypeAllListData"
          :key="item.id"
          class="type-item"
          :class="{
            'active-item': index === currentArtworksType
          }"
          @click="changeType(item, index)">{{ item.category_name }}</view>
      </view>
    </view>

    <!-- 作品标签 -->
    <view class="item-container default-box-shadow">
      <Title title="素材标签（选填）" :custom-style="{
        'marginBottom': '24rpx',
        'fontSize': '28rpx',
        'fontWeight': '700',
        'color': '#333'
      }">
        <!-- #ifdef H5 -->
          <view class="create-album create-album2" @click="handleShowDeleteLabel">
            <block v-if="!deleteLabelStatus">
              <u-icon name="edit-pen" color="#56d39d" size="24"></u-icon>
              <text>管理</text>
            </block>
            <text v-else>完成</text>
          </view>
        <!-- #endif -->
      </Title>
      <view class="type-container">
        <view
          v-for="item in currentArtworksLabelList"
          :key="item.id"
          class="type-item"
          :class="{
            'active-item': item.checked
          }"
          @click="selectArtworksLabel(item)">
          <text>{{ item.label_name }}</text>
          <image
            src="/static/icon/delete-icon2.png"
            mode="scaleToFill"
            class="delete-icon"
            v-if="deleteLabelStatus"
          />
        </view>
        <view
          class="type-item add-label"
          @click="showAddLabel = true">
          <u-icon name="plus" color="#56d39d" size="28" style="margin-right: 6rpx;"></u-icon>
          <text>添加</text>
        </view>
      </view>
    </view>
    <!-- 作品标签 -->

    <!-- 创建专辑 -->
    <view class="item-container default-box-shadow">
      <Title title="作品专辑（选填）" :custom-style="{
        'marginBottom': '24rpx',
        'fontSize': '28rpx',
        'fontWeight': '700',
        'color': '#333'
      }">
        <view class="create-album" @click="createAlbum.popupShow = true">
          <!-- <u-icon name="plus" color="#56d39d" size="24"></u-icon> -->
          <text class="huiju-iconfont huiju-icon-ico_classify_unfold"></text>
          <text>创建专辑</text>
        </view>
      </Title>
      <view class="type-container">
        <block v-if="albumList && albumList.length > 0">
          <view
            v-for="item in albumList"
            :key="item.id"
            class="type-item text-overflow"
            :class="{
              'active-item': item.checked
            }"
            @click="selectArtworksAlbum(item.id)">{{ item.name }}</view>
        </block>
        <view v-else class="album-container">
          没有查询到您创建的专辑
        </view>
      </view>
    </view>

    <!-- 上传类型 -->
    <view class="item-container default-box-shadow" style="padding-bottom: 24rpx;">
      <Title title="上传类型" :custom-style="{
        'marginBottom': '24rpx',
        'fontSize': '28rpx',
        'fontWeight': '700',
        'color': '#333'
      }">
      </Title>
      <view class="select-upload-type">
        <view
          class="select-upload-item"
          :class="{
            'upload-item-active': artworksUploadType === 1
          }"
          @click="artworksUploadType = 1">
          <view class="upload-type-name">普通素材</view>
          <view class="upload-type-tips">上传素材用户不可二次编辑</view>
          <!-- <image
            v-if="artworksUploadType === 1"
            src="@/static/icon/gou.png"
            mode="scaleToFill"
            class="gou-icon"
          /> -->
        </view>

        <view
          class="select-upload-item"
          :class="{
            'upload-item-active': artworksUploadType === 2
          }"
          @click="artworksUploadType = 2">
          <view class="upload-type-name">图文模板</view>
          <view class="upload-type-tips">用户可更改模板上文字图片</view>
          <image
            v-if="artworksUploadType === 2"
            src="@/static/icon/gou.png"
            mode="scaleToFill"
            class="gou-icon"
          />
        </view>
      </view>
    </view>

    <view v-if="artworksUploadType === 1" class="item-container default-box-shadow">
      <Title :title="uploadParams.artwroksTitle" :custom-style="{
        'marginBottom': '24rpx',
        'fontSize': '28rpx',
        'fontWeight': '700',
        'color': '#333'
      }"></Title>
      <view class="upload-artworks-container">
        <!-- 微信小程序和h5上传 -->
        <WechatH5Upload
          v-if="(isWechatH5 && initJssdkFlag && uploadForm.type != 3)"
          ref="uUpload"
          :action="uploadParams.action"
          :header="{
            'Authorization': 'Bearer ' + token // token
          }"
          height="200"
          upload-text="选择"
          :form-data="uploadForm"
          :limitType="uploadParams.limitType"
          :source-type="['album']"
          :max-count="uploadParams.maxCount"
          :type="uploadParams.uploadType"
          :uploadText="uploadParams.uploadText"
          :artworksType="uploadForm.type"
          :cateId="uploadForm.cate_id"
          del-bg-color="#56d39d"
          :auto-upload="false"
          @on-uploaded="uploadSuccess"
          @on-choose-complete="chooseComplete"
          @initJssdk="initJssdkCallback"></WechatH5Upload>
        <Upload
          v-else
          ref="uUpload"
          :action="uploadParams.action"
          :header="{
            'Authorization': 'Bearer ' + token // token
          }"
          height="200"
          upload-text="选择"
          :form-data="uploadForm"
          :limitType="uploadParams.limitType"
          :source-type="['album']"
          :max-count="uploadParams.maxCount"
          :type="uploadParams.uploadType"
          :uploadText="uploadParams.uploadText"
          :artworksType="uploadForm.type"
          :cateId="uploadForm.cate_id"
          del-bg-color="#56d39d"
          :auto-upload="false"
          @on-uploaded="uploadSuccess"
          @on-choose-complete="chooseComplete"></Upload>
      </view>
    </view>

    <!-- 提示 -->
    <view class="tips-container">
      <text>温馨提示：{{ uploadParams.uploadText }}格式，一次最多上传{{ uploadParams.maxCount }}个素材;</text>
      <text v-if="uploadNumConfig.max_upload_num > 0">今日限额{{ uploadNumConfig.max_upload_num }}张，已上传{{ uploadNumConfig.todayUploadNum }}张</text>
    </view>

    <!-- 上传按钮确定 -->
    <view class="confirm-btn">
      <u-button
        v-if="artworksUploadType === 1"
        class="btn"
        type="primary"
        shape="circle"
        hover-class="none"
        :custom-style="{
          backgroundColor: '#56d39d',
          fontWeight: 700
        }"
        @click="sumbitArtworks"
        :disabled="uploadNumConfig.surplus <= 0"
        :loading="btnLoading">确认上传1</u-button>
      
      <u-button
        v-else
        class="btn"
        type="primary"
        shape="circle"
        hover-class="none"
        :custom-style="{
          backgroundColor: '#56d39d',
          fontWeight: 700
        }"
        @click="handleMakeArtworks"
        :disabled="uploadNumConfig.surplus <= 0"
        :loading="btnLoading">前往制作</u-button>
    </view>

    <!-- 保护隐私协议 -->
    <view class="agreement">
      <u-checkbox-group active-color="#56d39d" class="checked-box">
        <u-checkbox v-model="agreement" size="40"></u-checkbox><text @click="handleAgreement">同意《用户服务协议》及《隐私政策》</text>
      </u-checkbox-group>
      <view style="padding-top: 24rpx;">我承诺所上传的素材均属原创或已取得相关授权</view>
    </view>

    <!-- 创建专辑 -->
    <CreateArtworksAlbum
      :popup-show="createAlbum.popupShow"
      :popup-title="createAlbum.popupTitle"
      :album-info="createAlbum.albumInfo"
      @close="close"
      @success="findAlbumByAuthorIdAndTypeIdFn"></CreateArtworksAlbum>
    
    <!-- 添加定制作品标签 -->
    <view class="label-container">
      <u-popup
        v-model="showAddLabel"
        border-radius="16" 
        mode="center"
        width="580rpx">
        <view class="label-content">
          <view class="label-title">新建标签</view>
          <view class="label-input-container">
            <view class="label-name">标签名称</view>
            <view class="label-input-content">
              <input v-model="label_name" class="label-input" type="text" maxlength="4" placeholder="请输入标签">
              <view class="label-right">{{ label_name.length }}/4</view>
            </view>
          </view>
          <view class="footer-container">
            <view class="btn cancel-btn" @click="showAddLabel = false">取消</view>
            <view class="btn" @click="sumbitArtworksLabel">确定</view>
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
  import { allArtworksCategory } from '@/api/user';
  import { makeArtworksTypeAllList } from '@/api/applet';
  import {
    findAlbumByAuthorIdAndTypeId,
    checkMaxUploadMax,
    makeChangePriceList,
    setArtworksLabel,
    artworksLabelList,
    deleteArtworksLabel,
  } from '@/api/artworks';
  import Title from '@/components/title/title';
  import Upload from '@/components/upload/upload';
  import WechatH5Upload from '@/components/upload/wechatUpload';
  import CreateArtworksAlbum from '@/components/createArtworksAlbum/createArtworksAlbum';
  import { mapGetters } from 'vuex';
  import config from '@/utils/config';
  import wechatH5 from '@/utils/wechatH5';
  import { checkText } from '@/utils/index';
  export default {
    components: {
      Title,
      Upload,
      WechatH5Upload,
      CreateArtworksAlbum
    },
    data() {
      return {
        deleteLabelStatus: false,
        label_name: '',
        show_type: 0,
        showAddLabel: false,
        agreement: true,
        initJssdkFlag: true,
        createAlbum: {
          popupShow: false,
          popupTitle: '创建新专辑',
          albumInfo: {
            name: '', // 专辑名称
            is_top: '', // 是否置顶
            author_id: '', // 主页id
            artworks_type_id: 10, // 作品类型
            cate_id: '' // 定制类型id
          }
        },
        currentArtworksType: 0,
        artworksCategoryList: [], // 全部分类
        currentArtworksLabelList: [], // 当前作品类型的分类
        albumList: [], // 专辑列表
        btnLoading: false,
        uploadParams: {
          limitType: ['png', 'PNG', 'jpg', 'JPG', 'jpeg', 'webp'],
          maxCount: 50,
          uploadType: 'image',
          action: `${config.baseApi}/upload/artworks`, // 作品上传
          // action: `${config.baseApi}/upload/uploadImg`,
          fileList: [],
          uploadText: '支持png/jpg',
          artwroksTitle: '上传素材',
        },
        uploadForm: {
          title: '', // 作品名称
          author_id: '',
          type: null, // 作品类型
          show_type: 0,
          cate_id: '', // 作品分类
          album_id: '', // 专辑id
          price: 0,
          label_id: ''
        },
        defaultAlbumId: '', // 默认专辑id
        isWechatH5: false,
        uploadNumConfig: {
          max_upload_num: 0,
          surplus: 0,
          todayUploadNum: 0
        },
        artworksTypeAllListData: [],
        artworksPriceList: [],
        artworksUploadType: 1
      }
    },
    computed: {
      ...mapGetters([
        'userInfo',
        'token',
        'version',
      ])
    },
    onLoad(options) {
      this.uploadForm.author_id = options.author_id;
      this.createAlbum.albumInfo.author_id = options.author_id;
      this.uploadForm.type = parseInt(options.type);
      if (options.album_id) {
        this.defaultAlbumId = options.album_id;
      }
      this.currentArtworksType = parseInt(options.currentArtworksType);
      // this.getAllArtworksCategory();
      this.getArtworksTypeAllListData(); // 获取作品类型
      setTimeout(() => {
        this.onloadType();
        this.findAlbumByAuthorIdAndTypeIdFn(); // 获取专辑
      }, 200);
      this.getCheckMaxUploadMax();
    },
    onShow() {
      // #ifdef H5
      if (wechatH5.isWechat()) {
        this.isWechatH5 = true;
      }
      // #endif
      console.log('33333333333333',this.isWechatH5)
    },
    methods: {

      // 点击制作作品
      handleMakeArtworks() {
        let uploadForm = this.uploadForm;
        uni.navigateTo({
          url: `/pages/newEdit/newEdit?author_id=${uploadForm.author_id}&cate_id=${uploadForm.cate_id}&type=10&label_id=${uploadForm.label_id}&album_id=${uploadForm.album_id}&auth_key=f0729595a08e6b03484d3d2c2b5c76a6${this.userInfo.id}`
        })
      },

      // 删除作品标签
      handleDeleteArtworksLabel(labelInfo) {
        uni.showModal({
          title: '温馨提示',
          content: `确定删除此标签：${labelInfo.label_name}`,
          confirmText: '确定',
          showCancel: true,
          confirmColor: '#56d39d',
          success: ({ confirm, cancel }) => {
            if (confirm) {
              deleteArtworksLabel({
                id: labelInfo.id,
              }).then(result => {
                if (result && result.code === 200) {
                  this.getArtworksLabelList();
                }
              })
            }
          }
        })
      },

      // 确定提交标签
      async sumbitArtworksLabel() {
        let label_name = this.label_name;
        if (label_name) {
          // 检查文本内容
          const flag = await checkText(label_name);
          if (flag) {
            setArtworksLabel({
              author_id: this.uploadForm.author_id,
              cate_id: this.uploadForm.cate_id,
              label_name
            }).then(result => {
              if (result && result.code === 200) {
                this.label_name = '';
                this.showAddLabel = false;
                this.getArtworksLabelList();
              }
            })
          }
        } else {
          uni.showToast({
            title: '请输入标签',
            icon: 'none',
            mask: false,
          })
        }
      },

      // 获取作品标签列表
      getArtworksLabelList() {
        this.uploadForm.label_id = '';
        artworksLabelList({
          author_id: this.uploadForm.author_id,
          cate_id: this.uploadForm.cate_id,
        }).then(result => {
          if (result && result.data && result.data.length > 0) {
            let list = result.data;
            list.forEach(item => {
              item.checked = false;
            })
            this.currentArtworksLabelList = list;
          } else {
            this.currentArtworksLabelList = [];
          }
        })
      },

      // 获取价格列表
      getMakePriceList(cate_id) {
        makeChangePriceList({
          author_id: this.uploadForm.author_id
        }).then(result => {
          if (result && result.data) {
            let list = result.data;
            this.artworksPriceList = list;
            list.forEach(item => {
              if (item.id == cate_id) {
                this.uploadForm.price = item.price;
              }
            })
          }
        })
      },

      // 获取作品分类
      getArtworksTypeAllListData() {
        makeArtworksTypeAllList().then(result => {
          if (result && result.data) {
            let list = result.data;
            this.artworksTypeAllListData = list.filter(item => item.id !== 5);
            this.uploadParams.artwroksTitle = `上传${this.artworksTypeAllListData[this.currentArtworksType].category_name}`;
            let cate_id = this.artworksTypeAllListData[this.currentArtworksType].id;
            this.uploadForm.cate_id = cate_id;
            this.createAlbum.albumInfo.cate_id = cate_id;
            this.getMakePriceList(cate_id);
            this.getArtworksLabelList(); // 获取作品标签列表
          }
        })
      },

      // 检查当天上传作品的次数
      getCheckMaxUploadMax() {
        checkMaxUploadMax().then(result => {
          console.log(result);
          if (result && result.data) {
            this.uploadNumConfig = result.data;
          }
        })
      },

      // 选择通道
      handleShowType(type) {
        this.uploadForm.show_type = type;
        if (type === 1) {
          uni.showModal({
            title: '温馨提示',
            content: `使用该通道上传素材审核标准较为宽松，但是不显示在抖音小程序端，仅显示快手 微信 qq端小程序！`,
            confirmText: '确定',
            showCancel: false,
            confirmColor: '#56d39d',
            success: ({ confirm, cancel }) => {
              if (confirm) {
                this.goCode();
              }
            }
          })
        }
      },

      // 公众号是否配置成功
      initJssdkCallback(res) {
        if (res === 'success') {
          this.initJssdkFlag = true;
        } else {
          this.initJssdkFlag = false;
        }
      },

      // 获取达人主页下的全部专辑
      findAlbumByAuthorIdAndTypeIdFn() {
        findAlbumByAuthorIdAndTypeId({
          author_id: this.uploadForm.author_id,
          artworks_type_id: this.createAlbum.albumInfo.artworks_type_id,
          artworks_cate_id: this.uploadForm.cate_id
        }).then(result => {
          if (result && result.data && result.data.length > 0) {
            let list = result.data;
            list.forEach(item => {
              if (item.id == this.defaultAlbumId) {
                item.checked = true;
                this.uploadForm.album_id = item.id;
              } else {
                item.checked = false;
              }
            })
            this.albumList = list;
          } else {
            this.albumList = [];
          }
        })
      },

      // 前往同意
      handleAgreement() {
        uni.navigateTo({ url: '/pages/about/agreement' })
      },

      // 选择专辑
      selectArtworksAlbum(album_id) {
        let albumList = this.albumList;
        albumList.forEach(item => {
          if (item.id === album_id) {
            item.checked = !item.checked;
            this.uploadForm.album_id = item.checked ? item.id : '';
          } else {
            item.checked = false;
          }
        })
      },

      // 选择作品标签
      selectArtworksLabel(labelInfo) {
        if (!this.deleteLabelStatus) {
          let currentArtworksLabelList = this.currentArtworksLabelList;
          currentArtworksLabelList.forEach(item => {
            if (item.id === labelInfo.id) {
              item.checked = !item.checked;
              this.uploadForm.label_id = item.checked ? item.id : '';
            } else {
              item.checked = false;
            }
          })
        } else {
          this.handleDeleteArtworksLabel(labelInfo);
        }
      },

      // 点击删除素材标签
      handleShowDeleteLabel() {
        this.uploadForm.label_id = '';
        let currentArtworksLabelList = this.currentArtworksLabelList;
        currentArtworksLabelList.forEach(item => {
          item.checked = false;
        })
        this.deleteLabelStatus = !this.deleteLabelStatus;
      },

      // 加载类型
      onloadType(type) {
        let typeId = this.artworksTypeAllListData[this.currentArtworksType].id;
        if (typeId == 1 || typeId == 2 || typeId == 4) {
          this.uploadParams.uploadText = '支持png/jpg';
          this.uploadParams.limitType = ['png', 'PNG', 'jpg', 'JPG', 'jpeg', 'webp', 'mp4'];
          this.uploadParams.uploadType = 'image';
          this.uploadParams.maxCount = 50;
        } else if (typeId == 3) {
          this.uploadParams.uploadText = '支持png/jpg/gif';
          this.uploadParams.limitType = ['png', 'PNG', 'jpg', 'JPG', 'jpeg', 'webp', 'gif'];
          this.uploadParams.uploadType = 'image';
          this.uploadParams.maxCount = 50;
        } else if (typeId == 7) {
          this.uploadParams.uploadText = '支持mp4';
          this.uploadParams.limitType = ['mp4', 'MP4'];
          this.uploadParams.uploadType = 'video';
          this.uploadParams.maxCount = 1;
        }
      },

      // 选择作品类型
      changeType(itemData, clickIndex) {
        // 壁纸、头像、背景
        if (itemData.id == 1 || itemData.id == 2 || itemData.id == 4) {
          this.uploadParams.uploadText = '支持png/jpg';
          this.uploadParams.limitType = ['png', 'PNG', 'jpg', 'JPG', 'jpeg', 'webp', 'mp4'];
          this.uploadParams.uploadType = 'image';
          this.uploadParams.maxCount = 50;
        } else if (itemData.id == 3) {
          this.uploadParams.uploadText = '支持png/jpg/gif';
          this.uploadParams.limitType = ['png', 'PNG', 'jpg', 'JPG', 'jpeg', 'webp', 'gif'];
          this.uploadParams.uploadType = 'image';
          this.uploadParams.maxCount = 50;
        } else if (itemData.id == 7) {
          this.uploadParams.uploadText = '支持mp4';
          this.uploadParams.limitType = ['mp4', 'MP4'];
          this.uploadParams.uploadType = 'video';
          this.uploadParams.maxCount = 1;
        }
        this.currentArtworksType = clickIndex;
        this.uploadParams.artwroksTitle = itemData.id == 3 ? `上传${itemData.category_name}（添加后可添加原声视频）` : `上传${itemData.category_name}`;
        this.uploadForm.cate_id = itemData.id;
        this.createAlbum.albumInfo.artworks_type_id = this.uploadForm.type;

        this.findAlbumByAuthorIdAndTypeIdFn(this.uploadForm.author_id, this.uploadForm.type, itemData.id);
        // console.log(this.$refs.uUpload)
        this.$refs.uUpload.resetList(); // 切换分类重置上传文件列表

        // 价格
        let list = this.artworksPriceList;
        list.forEach(item => {
          if (item.id == itemData.id) {
            this.uploadForm.price = item.price;
          }
        });

        // 获取标签列表
        this.getArtworksLabelList();
      },

      // 确定提交
      sumbitArtworks() {
        if (!this.agreement) {
          uni.showToast({
            title: '请勾选同意《用户服务协议》及《隐私政策》，在提交',
            icon: 'none',
            mask: false,
          })
          return;
        }
        this.btnLoading = true;
        uni.showToast({
          title: '上传中',
          icon: 'loading',
          mask: true,
          duration: 60 * 1000
        })
        console.log(3333,this.uploadForm)
        if(this.uploadForm.album_id&&this.uploadForm.album_id != ''){
          this.uploadForm.price = '1.00'
        }
        this.$refs.uUpload.upload();
      },

      // 上传成功
      uploadSuccess(data, index, lists, name) {
        this.btnLoading = false;
        if (data && data.length > 0) {
          this.uploadForm.title = '';
          this.$refs.uUpload.deleteAllItem(); // 上传成功清除所有作品
          this.selectArtworksAlbum(''); // 重置专辑
          uni.showToast({
            title: '上传成功',
            icon: 'success',
            mask: true,
          })
          setTimeout(function() {
            let pages = getCurrentPages();
            let pagesLength = pages.length;

            if (pagesLength > 1) {
              uni.navigateBack({
                delta: 1,
              })
            } else {
              let pages = getCurrentPages();
              let pagesLength = pages.length;

              if (pagesLength > 1) {
                uni.navigateBack({
                  delta: 1,
                })
              } else {
                uni.switchTab({ url: '/pages/creativeCenter/index' });
              }
            }
          }, 1500)
        } else {
          uni.showToast({
            title: '至少选择一张图片或上传失败请重试！',
            icon: 'none',
            mask: false,
          })
        }
      },

      // 选择图片
      chooseComplete(list) {
        // console.log(list)
      },

      // 关闭
      close() {
        this.createAlbum.popupShow = false;
      },

      // 返回
      goBack() {
        let pages = getCurrentPages();
        let pagesLength = pages.length;

        if (pagesLength > 1) {
          uni.navigateBack({
            delta: 1,
          })
        } else {
          uni.switchTab({ url: '/pages/creativeCenter/index' });
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  page{
    background-color: #f5f5f5;
  }
  .publish-container{
    padding: 32rpx;

    .item-container{
      background-color: #fff;
      padding: 24rpx 24rpx 0 24rpx;
      border-radius: 16rpx;
      margin-bottom: 12rpx;
    }

    .type-container{
      display: flex;
      flex-wrap: wrap;

      .type-item{
        max-width: 23.333333%;
        min-width: 23.333333%;
        text-align: center;
        height: 54rpx;
        line-height: 54rpx;
        background-color: #F5F5F9;
        margin-bottom: 24rpx;
        border-radius: 8rpx;
        font-size: 28rpx;
        color: #666;
        position: relative;
        overflow: hidden; // 超出一行文字自动隐藏
        text-overflow: ellipsis;// 文字隐藏后添加省略号
        white-space: nowrap; // 强制不换行
      }

      .type-item:nth-child(2n){
        margin-left: 2%;
        margin-right: 2%;
      }
      
      .type-item:nth-child(4n){
        margin-left: 2%;
        margin-right: 0;
      }

      .delete-icon{
        position: absolute;
        width: 40rpx;
        height: 40rpx;
        right: 0;
        top: 0;
      }

      .add-label{
        border: 2rpx dashed $uni-color-primary;
        background-color: #fff;
        color: $uni-color-primary;
      }

      .active-item{
        background-color: $uni-color-primary2;
        color: #fff;
      }
    }

    .select-upload-type{
      display: flex;
      justify-content: space-between;

      .select-upload-item{
        background-color: #f3f7fb;
        height: 132rpx;
        flex: 1;
        border-radius: 16rpx;
        padding: 24rpx 16rpx;
        position: relative;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
      }

      .select-upload-item:nth-child(1) {
        margin-right: 24rpx;
      }

      .upload-type-name{
        margin-bottom: 12rpx;
        color: #666;
      }

      .upload-type-tips{
        font-size: 22rpx;
        color: #b1b1b6;
      }

      .gou-icon{
        position: absolute;
        width: 60rpx;
        height: 48rpx;
        right: 0;
        top: 16rpx;
      }

      .upload-item-active{
        background-color: $uni-color-primary;

        .upload-type-name{
          color: #fff;
        }

        .upload-type-tips{
          color: #bbfdea;
        }
      }
    }

    .artworks-title{
      padding-top: 24rpx;
    }

    .album-container{
      padding: 24rpx;
      text-align: center;
      font-size: 24rpx;
      color: #888;
    }

    .upload-artworks-container{
      padding-bottom: 24rpx;
    }

    .tips-container{
      font-size: 24rpx;
      color: #888;
      padding: 24rpx 0;
    }

    .confirm-btn{
      padding: 24rpx 0;
    }

    .create-album{
      position: absolute;
      right: 0;
      top: 0;
      margin: auto;
      font-size: 26rpx;
      font-weight: 400;
      color: $uni-color-primary;
      background: #f3f7fb;
      padding: 6rpx 24rpx;
      border-radius: 24rpx;
    }

    .create-album2{
      background: none;
    }

    .agreement{
      margin-top: 24rpx;
      font-size: 24rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      color: $uni-color-primary;

      .checked-box{
        display: flex;
        align-items: center;
      }
    }
  }

  .select-pass-container{
    display: flex;
    padding-bottom: 24rpx;

    .pass-item{
      flex: 1;
      padding: 8rpx;
      background: #f7f7f8;
      border: 2rpx solid #e5e5e5;
      border-radius: 10rpx;
      transition: .1s;
    }
    .pass-item-active{
      background: #fff;
      border: 1px solid #56d39d;
      color: #56d39d;
    }
    .pass-item1{
      margin-right: 24rpx;
    }
    .pass-title{
      text-align: center;
      font-size: 28rpx;
      margin-bottom: 12rpx;
    }
    .pass-des{
      font-size: 24rpx;
    }
  }

  .label-container ::v-deep .u-mode-center-box{
    background-color: transparent;
  }

  .label-content{
    padding: 32rpx;
    background-color: #fff;

    .label-title{
      font-size: 38rpx;
      color: #172B4D;
      text-align: center;
      font-weight: bold;
      margin-bottom: 42rpx;
    }

    .label-input-container{
      display: flex;
      align-items: center;
      margin-bottom: 42rpx;

      .label-name{
        font-size: 28rpx;
        color: #172B4D;
        margin-right: 24rpx;
      }

      .label-input-content{
        background: #e0eefc;
        padding: 24rpx;
        flex: 1;
        border-radius: 16rpx;
        display: flex;
      }

      .label-input{
        font-size: 32rpx;
      }

      .label-right{
        color: #6c6c7e;
        font-size: 32rpx;
      }
    }

    .footer-container{
      display: flex;

      .btn{
        height: 88rpx;
        flex: 1;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16rpx;
        font-size: 32rpx;
        background: $uni-color-primary;
        color: #fff;
      }

      .cancel-btn{
        margin-right: 32rpx;
        background: #e0eefc;
        color: #172B4D;
      }
    }
  }
</style>
